<script setup>
import { toRefs, onMounted, ref } from "vue";
import { getDate } from "@/utils/index.js";

const data = reactive({
  time: {},
  source: null,
});
const { time, source } = toRefs(data);

onMounted(() => {
  time.value = getDate();
  setInterval(function () {
    time.value = getDate();
  }, 1000);
  setTimeout(function () {
    longLink();
  }, 1000);
});
function longLink() {
  if (window.EventSource) {
    source.value = new EventSource("http://82.156.13.135:8080/recent");

    source.value.onopen = function (event) {};
    source.value.addEventListener(
      "message",
      (event) => {
        // let data = eval("(" + event.data + ")");
        // if (data.length > 0) {
        //   data.map((item) => {
        //     if (item.length > 0) {
        //       item.map((child) => {});
        //     }
        //   });
        //   // Jane
        //   store.realList = data && data.length > 0 ? data : [];
        // }
      },
      false
    );

    // Jane
    source.value.addEventListener(
      "alarm",
      (event) => {
        // let data = eval("(" + event.data + ")");
        // store.alarmList = data && data.length > 0 ? data : [];
      },
      false
    );

    source.value.onerror = function (event) {
      source.value.close();
      longLink();
    };
  }
}
</script>

<template>
  <div class="app">
    <div class="in">
      <div class="title">
        <div class="img"></div>
        <div class="title-center">
          <div class="left">
            <img src="../assets/img/address.png" alt="" />
            国电电力国能怀安热电有限公司｜柯宁能源科技（南京）有限公司
          </div>
          <div class="center">#2机组氧量在线测量系统</div>
          <div class="right">
            {{
              time.time ? time.time : ""
            }}&nbsp;&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;&nbsp;{{
              time.date ? time.date : "-"
            }}&nbsp;&nbsp;&nbsp;{{ time.week ? time.week : "-" }}
          </div>
        </div>
      </div>
      <div class="label">
        <router-link to="/realtime"><p>实时数据</p></router-link>
        <router-link to="/history"><p>历史数据</p></router-link>
      </div>
      <div class="content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.app {
  width: 100%;
  height: 100%;
  font-size: 0.8vw;
}
.app .in {
  margin: 0 auto;
  height: 100%;
  background: url("../assets/img/bg.png") center center no-repeat;
  background-size: cover;
  padding: 0 32px;
}
.title {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: end;
  position: relative;
  .img {
    width: 100%;
    height: 6vh;
    background: url("../assets/img/top.png") center center no-repeat;
    background-size: cover;
  }
  .title-center {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    .left {
      font-size: 1.4vh;
      width: 30vw;
      display: flex;
      justify-content: start;
      align-items: end;
      font-family: PingFang SC;
      font-weight: bold;
      color: #319efd;
      height: 23px;
      position: relative;
      top: 53px;
      img {
        width: 22px;
        height: 22px;
      }
    }
    .right {
      font-size: 1.4vh;
      width: 30vw;
      display: flex;
      justify-content: end;
      align-items: start;
      font-family: PingFang SC;
      font-weight: 400;
      color: #dfe9f6;
      position: relative;
      right: 40px;
    }
    .center {
      font-size: 3.6vh;
      width: 40vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: PingFang SC;
      font-weight: 800;
      color: #dfe9f6;
      line-height: 42px;
      background: linear-gradient(
        0deg,
        rgba(84, 166, 255, 0.31) 0%,
        rgba(255, 255, 255, 0.31) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.label {
  display: flex;
}
.content {
  height: calc(100vh - 10vh);
  padding: 0.2vw 0.8vw 0.8vw 0.8vw;
  border: 1px solid red;
}
</style>
